<template>
	<view class="h_100 bg-white">
		<u-sticky>
			<view class="container pt-3">
				<view class="flex align-center">
					<text class="c_6 font mr-1">查询:</text>
					<view style="width: 89%;"><search-view @search="searchChange" @clear="searchChange('')"></search-view></view>
					<!-- <u-search placeholder="请输入关键字" border="surround" v-model="searchVal" fontSize="23rpx" @search="searchChange" @clear="searchChange('')"></u-search> -->
				</view>
			</view>
		</u-sticky>
		<view v-if="list.length <= 0" class="p-2" style="margin:auto;"><u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无下载内容"></u-empty></view>
		<view v-else class=" py-2 pl-2 w-100">
			<view class="flex justify-between">
				<button class="allDelte font_24 c_main" @click="(checkShow = !checkShow), (allCheck = true), allCheckChange()">{{ checkShow ? '取消' : '管理' }}</button>
				<view class="text-right font_24_2 text-hover-light pr-2 pb-1">左滑删除</view>
			</view>
			<view class="flex">
				<checkbox-group @change="allCheckChange" v-if="checkShow">
					<view class="check_box">
						<checkbox class="check" :checked="allCheck" color="#CF1526" />
						<!-- <text class="c_9 font_24">全选</text> -->
					</view>
				</checkbox-group>
				<text class="c_9 font_24 text-center" style="width: 50%;">文件名</text>
				<text class="c_9 font_24 text-center" style="width: 50%;">下载时间</text>
			</view>
			<view class="mb-2 mt-1" v-for="(item, index) of list" :key="item.id">
				<u-swipe-action>
					<u-swipe-action-item :options="options1" @click="fileDel(item, index)">
						<!-- <view class="overflow-hidden"> -->
						<view class="file_name flex align-center pr-2" @click="openFile(item, index)">
							<view @click.stop v-if="checkShow">
								<checkbox-group @change="checkChange(item, index)">
									<view class="check_box"><checkbox class="check" :value="item.id" :checked="item.check" color="#CF1526" /></view>
								</checkbox-group>
							</view>
							<view class="imgicon"><image :src="item.file_type_img" mode="aspectFit" class="imgicon"></image></view>
							<view class="tit h6 ml-1 pr-1 text_hidden1">{{ item.title + '.' + item.file_type }}</view>
							<view class="time font-sm ml-1 pr-1 c_9 lh_48">{{ item.time }}</view>
							<view class="tips c_main font_22 ml-2 mt-1" v-if="item.failure">已失效</view>
						</view>
						<!-- <button class="shear" open-type="share" @click="shearChange(item)">
								<image src="@/static/img2/my/shear.png" mode="aspectFill" style="width: 40rpx; height: 40rpx;"></image>
							</button> -->
						<!-- </view> -->
					</u-swipe-action-item>
				</u-swipe-action>
			</view>
			<u-loadmore :status="status" color="#E5E5E5" lineColor="#E5E5E5" dashed line />
			<button class="bottom_btn text-white font-weight-bolder" v-if="checkShow" @click="allDelete">批量删除</button>
		</view>
		<u-popup :show="videoShow" @close="videoShow = false" mode="center"><video :src="videoSrc"></video></u-popup>
	</view>
</template>

<script>
import { filesdownloadList, filesDownloadDel, fileRoute } from '@/api/my/uploadfile.js';
import searchView from '@/components/search/search.vue';
export default {
	components: { searchView },
	data() {
		return {
			searchVal: '',
			list: [],
			page: 1, //页数
			suo: true,
			status: 'loadmore',
			options1: [
				{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}
			],
			videoSrc: '',
			videoShow: false,
			sheatCont: {},
			// shearPath: '',
			checkShow: false,
			checkList: [],
			delList: [],
			allCheck: false
		};
	},
	onReachBottom() {
		if (this.suo) {
			//定义个小锁，当没有数据时锁住suo
			this.status = 'loading';
			this.page = ++this.page;
			setTimeout(() => {
				this.getList();
			}, 1000);
		}
	},
	onLoad() {
		this.getList();
		// 分享
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	// onShareAppMessage(res) {
	// 	let that = this;
	// 	return {
	// 		title: that.sheatCont.title + '.' + that.sheatCont.file_type,
	// 		path: '/subPages/my/list/download/index?id=' + that.sheatCont.shearId,
	// 		content: that.shearPath,
	// 		imageUrl: that.sheatCont.file_type_img,
	// 		success(e) {
	// 			console.log(e);
	// 		},
	// 		fail(err) {
	// 			console.log(err);
	// 		}
	// 	};
	// },
	methods: {
		searchChange(value) {
			console.log(value);
			this.searchVal = value;
			this.getList();
			this.list = [];
			this.page = 1;
		},
		getList() {
			let msg = {
				kw: this.searchVal,
				token: uni.getStorageSync('userInfo').token || '',
				page: this.page
			};
			filesdownloadList(msg).then(res => {
				if (res.code == 0) {
					this.list.push(...res.data);
					if (res.data.length == 0) {
						this.status = 'nomore';
						this.suo = false;
					} else if (res.data.length < 10) {
						this.status = 'nomore';
						this.suo = false;
					} else {
						this.status = 'loadmore';
						this.suo = true;
					}
				} else {
					uni.$u.toast(res.msg);
				}
			});
		},
		// 删除
		fileDel(val, idx) {
			filesDownloadDel({ ids: [val.id] }).then(res => {
				if (res.code == 0) {
					this.list.splice(idx, 1);
					uni.$u.toast(res.msg);
				}
			});
		},
		// 打开文件
		openFile(val, idx) {
			let that = this;
			uni.showLoading({ title: '正在打开资料……' });
			uni.getSystemInfo({
				success: res => {
					// PC端视频和图片预览
					// if (res.platform == 'windows' || res.platform == 'mac' || res.platform == 'devtools') {

					if (val.file_type == 'mp4' || val.file_type == 'mp3') {
						that.videoShow = true;
						that.videoSrc = val.route_url;
						uni.hideLoading();
					} else if (
						val.file_type == 'jpg' ||
						val.file_type == 'png' ||
						val.file_type == 'gif' ||
						val.file_type == 'psd' ||
						val.file_type == 'tif' ||
						val.file_type == 'bmp' ||
						val.file_type == 'webp'
					) {
						uni.previewImage({
							urls: [val.route_url],
							success: data => {
								uni.hideLoading();
								return;
							},
							fail: err => {
								console.log(err.errMsg);
							}
						});
					} else {
						this.open(val, idx);
						// uni.$u.toast('PC端暂不支持查看此类文件，请前往手机端进行查看~');
					}
					// return;
					// }
					// this.open(val.route_url);
				}
			});
			return;
		},
		open(val, idx) {
			// 移动端查看
			uni.openDocument({
				filePath: val.route_url,
				showMenu: true,
				success: res => {
					uni.hideLoading();
					console.log('打开文档成功', res);
				},
				fail: err => {
					// console.log('打开文档失败', err);
					uni.downloadFile({
						url: val.img_url,
						success: fileRes => {
							var filePath = fileRes.tempFilePath;
							uni.openDocument({
								filePath: filePath,
								showMenu: true,
								complete: () => {
									uni.hideLoading();
								},
								success: openRes => {
									console.log('打开文档成功');
									fileRoute({ id: val.id, route_url: filePath }).then(res => {
										console.log('保存路径', res);
										this.$set(this.list[idx], 'route_url', filePath);
									});
								},
								fail: err => {
									this.$set(this.list[idx], 'failure', true);
								}
							});
						},
						fail: err => {
							console.log('下载失败', err);
							uni.hideLoading();
							uni.$u.toast('文件错误');
						}
					});
				}
			});
		},
		// shearChange(val) {
		// 	console.log(val);
		// 	this.sheatCont = val;
		// 	let filePath = uni.getStorageSync('fileId') || [];

		// 	this.shearPath = filePath.find(item => item.id == val.file_id)?.openPath || null;
		// 	console.log(this.shearPath);
		// }
		// 全选
		allCheckChange() {
			this.allCheck = !this.allCheck;
			if (this.allCheck) {
				this.list.map(item => {
					item.check = true;
					this.checkList.push(item.id);
					// this.delList.push(val.file_id);
				});
			} else {
				this.list.map(item => {
					item.check = false;
					this.checkList = [];
					// this.delList = [];
				});
			}
		},
		checkChange(val, idx) {
			this.$set(this.list[idx], 'check', !val.check);
			if (val.check) {
				this.checkList.push(val.id);
				this.delList.push(val.file_id);
			} else {
				let index = this.checkList.map(item => item).indexOf(val.id);
				this.checkList.splice(index, 1);
				this.delList.splice(index, 1);
			}
		},
		// 批量删除
		allDelete() {
			filesDownloadDel({ ids: this.checkList }).then(res => {
				if (res.code == 0) {
					// console.log(this.delList);
					this.getList();
					this.list = [];
				} else {
					uni.$u.toast(res.msg);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.btn {
	// width: 80rpx;
	height: 50rpx;
	padding: 5rpx 15rpx;
}
.btn:first-child {
	background-color: #2b85e4;
}
.btn:last-child {
	background-color: #cf1526;
}
.file_name {
	// width: 88%;
	padding: 10rpx 0;
	// float: left;
}
.check_box {
	z-index: 15;
	.check {
		transform: scale(0.7);
	}
}
.tit {
	// table-layout: fixed;
	// word-wrap: break-word;
	// word-break: normal;
	// overflow: hidden;
	width: 50%;
}
.time {
	width: 40%;
}
.tips {
	min-width: 75rpx;
}
.shear {
	width: 70rpx;
	height: 63rpx;
	padding: 10rpx;
	margin: 10rpx 15rpx 0 0;
	background-color: #fff;
	float: right;
}
.allDelte {
	width: 75rpx;
	height: 45rpx;
	line-height: 45rpx;
	margin: 0;
	padding: 0 10rpx;
	border: 1px solid $color14;
}
.bottom_btn {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 98rpx;
	line-height: 98rpx;
	background-color: $color14;
	// padding: 30rpx;
	border-radius: 20rpx 20rpx 0px 0px;
	font-size: 28rpx;
	text-align: center;
	z-index: 999;
}
.imgicon {
	width: 48rpx;
	height: 52rpx;
}
</style>
